<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>keyboard</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="keyboard">
    <div class="cell"><div class="key">Esc</div></div>
    <div class="cell"></div>
    <div class="cell"><div class="key">F1</div></div>
    <div class="cell"><div class="key">F2</div></div>
    <div class="cell"><div class="key">F3</div></div>
    <div class="cell"><div class="key">F4</div></div>
    <div class="cell"></div>
    <div class="cell"><div class="key">F5</div></div>
    <div class="cell"><div class="key">F6</div></div>
    <div class="cell"><div class="key">F7</div></div>
    <div class="cell"><div class="key">F8</div></div>
    <div class="cell"></div>
    <div class="cell"><div class="key">F9</div></div>
    <div class="cell"><div class="key">F10</div></div>
    <div class="cell"><div class="key">F11</div></div>
    <div class="cell"><div class="key">F12</div></div>
    <div class="cell"><div class="key">SrcLk</div></div>
    <div class="cell"><div class="key">Pause</div></div>
    <div class="cell"><div class="key">~</div></div>
    <div class="cell"><div class="key">1</div></div>
    <div class="cell"><div class="key">2</div></div>
    <div class="cell"><div class="key">3</div></div>
    <div class="cell"><div class="key">4</div></div>
    <div class="cell"><div class="key">5</div></div>
    <div class="cell"><div class="key">6</div></div>
    <div class="cell"><div class="key">7</div></div>
    <div class="cell"><div class="key">8</div></div>
    <div class="cell"><div class="key">9</div></div>
    <div class="cell"><div class="key">0</div></div>
    <div class="cell"><div class="key">-</div></div>
    <div class="cell"><div class="key">=</div></div>
    <div class="cell backspace"><div class="key">Backspace</div></div>
    <div class="cell"><div class="key">Ins</div></div>
    <div class="cell"><div class="key">Home</div></div>
    <div class="cell"><div class="key">PgUp</div></div>
    <div class="cell tab"><div class="key">Tab</div></div>
    <div class="cell"><div class="key">Q</div></div>
    <div class="cell"><div class="key">W</div></div>
    <div class="cell"><div class="key">E</div></div>
    <div class="cell"><div class="key">R</div></div>
    <div class="cell"><div class="key">T</div></div>
    <div class="cell"><div class="key">Y</div></div>
    <div class="cell"><div class="key">U</div></div>
    <div class="cell"><div class="key">I</div></div>
    <div class="cell"><div class="key">O</div></div>
    <div class="cell"><div class="key">P</div></div>
    <div class="cell"><div class="key">[{</div></div>
    <div class="cell"><div class="key">]}</div></div>
    <div class="cell"><div class="key">\|</div></div>
    <div class="cell"><div class="key">Del</div></div>
    <div class="cell"><div class="key">End</div></div>
    <div class="cell"><div class="key">PgDn</div></div>
    <div class="cell caps"><div class="key">Caps</div></div>
    <div class="cell"><div class="key">A</div></div>
    <div class="cell"><div class="key">S</div></div>
    <div class="cell"><div class="key">D</div></div>
    <div class="cell"><div class="key">F</div></div>
    <div class="cell"><div class="key">G</div></div>
    <div class="cell"><div class="key">H</div></div>
    <div class="cell"><div class="key">J</div></div>
    <div class="cell"><div class="key">K</div></div>
    <div class="cell"><div class="key">L</div></div>
    <div class="cell"><div class="key">;:</div></div>
    <div class="cell"><div class="key">'"</div></div>
    <div class="cell enter"><div class="key">Enter</div></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell"></div>
    <div class="cell shift-left"><div class="key">Shift</div></div>
    <div class="cell"><div class="key">Z</div></div>
    <div class="cell"><div class="key">X</div></div>
    <div class="cell"><div class="key">C</div></div>
    <div class="cell"><div class="key">V</div></div>
    <div class="cell"><div class="key">B</div></div>
    <div class="cell"><div class="key">N</div></div>
    <div class="cell"><div class="key">M</div></div>
    <div class="cell"><div class="key">,<</div></div>
    <div class="cell"><div class="key">.></div></div>
    <div class="cell"><div class="key">/?</div></div>
    <div class="cell shift-right"><div class="key">Shift</div></div>
    <div class="cell"></div>
    <div class="cell"><div class="key">↑</div></div>
    <div class="cell"></div>
    <div class="cell"><div class="key">Ctrl</div></div>
    <div class="cell"><div class="key">Win</div></div>
    <div class="cell"><div class="key">Alt</div></div>
    <div class="cell space"><div class="key"></div></div>
    <div class="cell"><div class="key">Alt</div></div>
    <div class="cell"><div class="key">Win</div></div>
    <div class="cell"><div class="key">Fn</div></div>
    <div class="cell"><div class="key">Ctrl</div></div>
    <div class="cell"><div class="key">←</div></div>
    <div class="cell"><div class="key">↓</div></div>
    <div class="cell"><div class="key">→</div></div>
</div>
</body>
</html>
